<template>
  <n-space vertical>
    <n-layout
      position="absolute"
      style="width: 100vw"
      :native-scrollbar="false"
    >
      <n-layout
        :native-scrollbar="false"
        class="result"
        :content-style="paddingStyle"
      >
        <div class="result-page">
          <n-result
            status="403"
            title="禁止访问"
            description="总有些门是对你关闭的"
          >
            <template #footer>
              <n-button @click="$router.push('/login')" type="primary" ghost
                >我也想用鲸语问卷</n-button
              >
            </template>
          </n-result>
        </div>
      </n-layout>
    </n-layout>
  </n-space>
</template>

<script setup lang="ts">
import { computed } from 'vue';
// 响应式 padding
const paddingStyle = computed(() => {
  return window.innerWidth > 1080
    ? 'padding: 14vh 18vw 10vh 18vw'
    : window.innerWidth > 650
    ? 'padding: 14vh 7vw 10vh 7vw'
    : '';
});
</script>

<style scoped lang="scss">
.result {
  min-height: 100vh;
  background: url('@images/bg-2.png');
  background-position: 38% 10%; /*这个是按从左往右，从上往下的百分比位置进行调整*/
  &-page {
    background-color: #fff;
    padding: 5vh 5vw 3vh 5vw;
    min-height: 50vh;
  }
}
</style>
